<template>
	<view class="">
		<view class="tabBar" :style="{height:isIos?'140rpx':'98rpx'}">
			<view class="tabBar_list" :style="{paddingBottom:isIos?'40rpx':''}">
				<view v-for="(item,index) in tabList" :key="item.id"
					:class="item.bigType ? 'tabBar_item2' : 'tabBar_item'" @click="selectTabbar(item,index)">
					<template v-if="item.icon && item.activeIcon">
						<image v-if="index == showIndex" :src="item.activeIcon"></image>
						<image v-else :src="item.icon"></image>
					</template>
					<template v-else>
						<view class="emptyImg"></view>
					</template>
					<view class="tabBar_name" v-if="item.name!='地图导览'" :style="{color: index == showIndex ? activeColor : color}">{{item.name}}
					</view>
					<view class="tabBar_name" style="margin-top: -6rpx;" v-else :style="{color: index == showIndex ? activeColor : color}">{{item.name}}
					</view>
				</view>
			</view>

		</view>

	</view>

</template>

<script>
	export default {
		props: {
			// tabbar数据源
			// tabList: {
			// 	type: Array,
			// 	default () {
			// 		return []
			// 	}
			// },
			// 初始选中tabbar索引
			index: {
				type: Number,
				default: 0
			},
			// 默认文字颜色
			color: {
				type: String,
				default: '#333'
			},
			// 选中文字颜色
			activeColor: {
				type: String,
				default: '#333'
			},
			//是否需要设置navigationBarTitleText文字
			isNeedSetNavTitle: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				isIos: false,
				showIndex: 0,
				tabList: [{
						id: 1,
						name: '首页',
						icon: '../../../../static/tabBar/icon_sy.png',
						activeIcon: '../../../../static/tabBar/icon_sy_sel.png',
						pagePath: "/pages/index/index",
					},
					{
						id: 2,
						pagePath: "/pages/news_list/index",
						name: '资讯',
						icon: '../../../../static/tabBar/icon_zx_nor.png',
						activeIcon: '../../../../static/tabBar/icon_zx.png',
					},

					{

						id: 3,
						name: '地图导览',
						pagePath: "dt",
						icon: '../../../../static/tabBar/icon_dw.png',
						activeIcon: '../../../../static/tabBar/icon_dw.png',
						bigType: true //是否凸起显示
					}, {
						id: 4,
						name: '精彩瞬间',
						pagePath: "jcsj",
						icon: '../../../../static/tabBar/icon_jcsj_nor.png',
						activeIcon: '../../../../static/tabBar/icon_jcsj.png',
					},
					{
						id: 5,
						name: '我的',
						pagePath: "/pages/user/index",
						icon: '../../../../static/tabBar/icon_wd_nor.png',
						activeIcon: '../../../../static/tabBar/icon_wd.png',
					}
				],

			}
		},
		watch: {
			index: {
				deep: true,
				immediate: true,
				handler(inx) {
					this.showIndex = inx
				},
			},
		},
		mounted() {
			if (this.isNeedSetNavTitle) {
				uni.setNavigationBarTitle({
					title: this.tabList[this.showIndex]?.name
				})
			}
			// 判断市场常见的几种刘海屏机型
			uni.getSystemInfo({
				success: res => {
					let modelmes = res.model
					if (modelmes.indexOf('iPhone') >= 0) this.isIos = true
					else this.isIos = false
				}
			})
		},
		methods: {
			selectTabbar(item, index) {

				if (this.showIndex != index) {
					this.showIndex = index
					this.$emit('change', item)
				}
				if (this.isNeedSetNavTitle) {
					uni.setNavigationBarTitle({
						title: this.tabList[this.showIndex]?.name
					})
				}
				console.log(item, ';eeeeeee')
				if (item.pagePath == 'dt') {
					let url = 'https://guide.guanxu666.com/guide/huahaibaifu#/'
					uni.navigateTo({
						url: '/pagesA/web/webview?url=' + url,
					})
					// uni.showToast({
					// 	title: "地图按钮状态过去但是不跳本地",
					// 	icon: 'none',
					// 	duration: 1000
					// })
				} else if (item.pagePath == 'jcsj') {
					// 这个链接，麻烦放一下这个位置
					let urls = 'https://mp.weixin.qq.com/s?__biz=MzkxNTYzMDg0Mg==&mid=2247483975&idx=1&sn=5ea1785096b26750638ae9f764d6113d&chksm=c15d7dd2f62af4c4850b67cc920dd35fa1a9b23d5d6a56642c57748b024c1ee8580cc10b1e57#rd'
					console.log(urls,'url')
					uni.navigateTo({
						url: '/pagesA/web/webview1?url=' + urls,
					})
					// uni.showToast({
					// 	title: "精彩瞬间按钮状态过去但是不跳本地",
					// 	icon: 'none',
					// 	duration: 1000
					// })
				} else {
					uni.reLaunch({
						url: item.pagePath,
						animationType: "slide-in-right",
						animationDuration: 2000
					});
				}
			}
		}
	}
</script>

<style scoped>
	.tabBar {
		width: 100%;
		height: 100rpx;
		padding: 8rpx 0;
		background: #FFFFFF;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.15);
	}

	.tabBar_list {
		width: 98%;
		display: flex;
		justify-content: space-between;
	}

	.tabBar_item {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 24rpx;
		color: #666666;
	}

	.tabBar_item image {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 2rpx;
	}

	.tabBar_item2 {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 24rpx;
		color: #333;
		    bottom: 40rpx;
		/* margin-top: -7vh; */
		position: relative;
		z-index: 101;
	}

	.tabBar_item2 image {
		width: 150rpx;
		height: 150rpx;
	}

	.emptyImg {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 2rpx;
		background: dodgerblue;
		border-radius: 50%;
	}

	.tabBar_name {
		text-align: center;
		line-height: 24rpx;
		margin-top: 10rpx;
	}
</style>